<template>
  <div class="top-bar">
    <div class="left">
      <span><i class="iconfont icon-02"></i></span>
    </div>
    <div class="middle">
      <!-- <div class="item" @click="changeIndex(0)"><span :class="TopIndex==0?'active':''">同城</span></div> -->
      <div class="item" @click="changeIndex(1)"><span :class="TopIndex==1?'active':''">关注</span></div>
      <div class="item" @click="changeIndex(2)"><span :class="TopIndex==2?'active':''">推荐</span></div>
    </div>
    <div class="right"><i class="iconfont icon-sousuo"></i></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      TopIndex:2
    }
  },
  methods: {
    changeIndex(index){
      this.TopIndex = index
      if (index==1) {
        this.$router.push('attention')
      }else{
        this.$router.push('/')
      }
    }
  }
}
</script>
<style scoped>
  .top-bar{
    position: fixed;
    width: 100%;
    height: 60px;
    font-size: 18px;
    color: #cccccc;
    padding: 20px;
    display: flex;
    box-sizing: border-box;
    z-index: 999;
  }
  .left, .right{
    width: 20%;
  }
  .iconfont{
    font-size: 24px;
  }
  .middle{
    width: 60%;
    display: flex;
    justify-items: center;
  }
  .middle .item{
    flex: 1;
    text-align: center;
  }
  .middle .item span{
    padding: 10px 0;
  }
  .middle .item .active{
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
  }
  .right{
    text-align: right;
  }
</style>